<div class="row">
    <div class="col-lg-12">
        <div class="card card-outline-info">
            <div class="card-header">
                <h4 class="m-b-0 text-white">Float Input Reactive Form</h4>
            </div>
            <div class="card-body">
                <form class="floating-labels" #rectiveForm="ngForm" [formGroup]="formGroup" (ngSubmit)="onSubmit()" novalidate>
                    <div class="form-body">
                        <h3 class="card-title">Person Info</h3>
                        <hr>
                        <div class="row p-t-20">
                            <div class="col-md-6">
                                <div class="form-group" opFormGroupValidationClass [formModel]="rectiveForm" [fieldModel]="formGroup.controls.name">
                                    <input type="text" class="form-control" formControlName="name">
                                    <span class="bar"></span>
                                    <label>Name</label>
                                    <op-single-error-message [formModel]="rectiveForm" [fieldModel]="formGroup.controls.name" labelTitle="Name"></op-single-error-message>
                                </div>
                            </div>
                            <!--/span-->
                            <div class="col-md-6">
                                <div class="form-group" opFormGroupValidationClass [formModel]="rectiveForm" [fieldModel]="formGroup.controls.age">
                                    <input type="text" class="form-control" formControlName="age">
                                    <span class="bar"></span>
                                    <label>Age</label>
                                    <op-single-error-message [formModel]="rectiveForm" [fieldModel]="formGroup.controls.age" labelTitle="Age"></op-single-error-message>
                                </div>
                            </div>
                            <!--/span-->
                        </div>
                        <div class="row p-t-20">
                            <div class="col-md-6">
                                <div class="form-group" opFormGroupValidationClass [formModel]="rectiveForm" [fieldModel]="formGroup.controls.password">
                                    <input type="password" class="form-control" formControlName="password">
                                    <span class="bar"></span>
                                    <label>Password</label>
                                    <op-single-error-message [formModel]="rectiveForm" [fieldModel]="formGroup.controls.password" labelTitle="Password"></op-single-error-message>
                                </div>
                            </div>
                            <!--/span-->
                            <div class="col-md-6">
                                <div class="form-group" opFormGroupValidationClass [formModel]="rectiveForm" [fieldModel]="formGroup.controls.confirmPassword">
                                    <input type="password" class="form-control" formControlName="confirmPassword">
                                    <span class="bar"></span>
                                    <label>Confirm Password</label>
                                    <op-single-error-message [formModel]="rectiveForm" [fieldModel]="formGroup.controls.confirmPassword" labelTitle="Confirm Password"></op-single-error-message>
                                </div>
                            </div>
                            <!--/span-->
                        </div>
                    </div>
                    <div class="form-actions">
                        <button type="submit" class="btn btn-success" [disabled]="rectiveForm.invalid">
                            <i class="fa fa-check"></i> Save</button>
                        <button type="button" class="btn btn-inverse" data-toggle="modal" data-target="#myNewModal">Open Dialog</button>
                        <button type="button" class="btn btn-inverse">Cancel</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- Row -->
<op-modal-dialog modalId="myNewModal" modalTitle="提示：" (confirm)="confirm()" (cancel)="cancel()">
    Are you sure to delete 2 record
</op-modal-dialog>